<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2023 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="form-group-grouping typeimplementation">
    <form>
        <div class="form-group">
            <label for="implName-{{ randomIdSuffix }}" class="control-label">
                {{ generateData.toscaType | toscaTypeToReadableName }} Name
            </label>
            <input type="text" name="implementationName" [(ngModel)]="generateData.name" #textInput="ngModel"
                   class="form-control" (input)="checkImplementationExists();"
                   id="implName-{{ randomIdSuffix }}" required pattern="^((?!_).)*$">
            <div *ngIf="textInput.errors; else createArtifact" class="alert alert-danger">
                <div [hidden]="!textInput.errors.pattern">
                    No underscores allowed!
                </div>
            </div>
            <ng-template #createArtifact>
                <div *ngIf="generateData.createComponent; else reuseArtifact" class="alert alert-success">
                    Will be created.
                </div>
                <ng-template #reuseArtifact>
                    <div class="alert alert-info">Will be reused.</div>
                </ng-template>
                <div *ngIf="generateData.toscaType == artifactTemplate">
                    <div *ngIf="artifactTypes">
                        <label> Artifact Type</label>
                        <ng-select name="artifactType" [items]="artifactTypes" (selected)="typeSelected($event)"
                                   [active]="[selectedArtifactType]">
                        </ng-select>
                    </div>
                    <div
                        *ngIf="generateData.selectedInterface.operations && generateData.selectedInterface.operations.length > 1">
                        <!--If we only have a single operation we can just use implement all.-->
                        <br>
                        <label>Scope</label>
                        <div class="form-group">
                            <br>
                            <input type="radio" id="{{implementAllOperations.name}}" name="scope"
                                   (click)="handleRadioButton(implementAllOperations)" [value]="implementAllOperations"
                                   [(ngModel)]="generateData.selectedOperation">
                            <label for="{{implementAllOperations.name}}">{{implementAllOperations.name}} (Whole
                                Interface)</label>
                            <div *ngFor="let operation of generateData.selectedInterface.operations">
                                <br>
                                <input type="radio" name="scope" id={{operation.name}}
                                       (click)="handleRadioButton(operation)" [value]="operation"
                                       [(ngModel)]="generateData.selectedOperation">
                                <label for="{{operation.name}}">{{operation.name}} (Operation)</label>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
            <div class="form-group">
                <label for="finalName-{{ randomIdSuffix }}" class="control-label">Final name</label>
                <input id="finalName-{{ randomIdSuffix }}" class="form-control" type="text" disabled
                       [value]="generateData.name + '_w1-wip1'">
            </div>
            <!-- pattern parameter is required to enable form validation -->
            <winery-namespace-selector name="artifactNamespace"
                                       [(ngModel)]="generateData.namespace"
                                       (onChange)="checkImplementationExists();"
                                       [useStartNamespace]="false"
                                       pattern="^\S*$">
            </winery-namespace-selector>
        </div>
    </form>
</div>
